<template>
  <div class="main">
    <div class="basicMsg">
      <tab active-color='#2269ff'>
        <tab-item @on-item-click="$router.push({path:'basicMessageDetail',query:{id:param.data.id}})">基本信息</tab-item>
        <tab-item @on-item-click="$router.push({path:'idCardMessage',query:{id:param.data.id}})">证件信息</tab-item>
        <!--<tab-item @on-item-click="$router.push({path:'trainMessage',query:{id:param.data.id}})">培训信息</tab-item>-->
        <tab-item selected @on-item-click="$router.push('breakMessage')"><i>违章信息</i></tab-item>
        <tab-item @on-item-click="$router.push({path:'healthMessage',query:{id:param.data.id}})">职业健康</tab-item>
      </tab>
      <no-data v-if="acceptList.length==0 && flag"></no-data>
      <vue-better-scroll class="wrapper" v-else
                         ref="scrollqq"
                         :scrollbar="scrollbarObj"
                         :pullDownRefresh="pullDownRefreshObj"
                         :pullUpLoad="pullUpLoadObj"
                         :startY="parseInt(startY)"
                         @pullingUp="onPullingUp">
        <dl ref="list" @click="$router.push({path:`breakInfo?id=${item.Id}`})"
            v-for="(item,index) in acceptList" :key="index">
          <dt>违章描述: {{item.Description}}</dt>
          <dd>违章时间: {{item.HappendDate}}</dd>
        </dl>
      </vue-better-scroll>
    </div>
    <div>

    </div>
    <myMenu></myMenu>
  </div>

</template>

<script>
  import { Tab, TabItem } from 'vux'
  import VueBetterScroll from 'vue2-better-scroll'
  import myMenu from '@/commonComponents/menu'
  import {breakList} from '@/api/api'
  import noData from '@/commonComponents/noData/noData.vue'

  export default {
    name: 'App',
    data () {
      return {
        flag: false,
        scrollbarObj: {
          fade: true
        },
        // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
        pullDownRefreshObj: false,
        // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: '加载更多',
            noMore: '没有更多数据了'
          }
        },
        startY: 0, // 纵轴方向初始化位置
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        acceptList: [], // 列表数据
        listCount: 0, // 当前页列表条数
        listAllCount: 0, // 列表总数
        userInfo: {},
        param: {
          allowPaging: true,
          data: {
            id: '1930118106'
          },
          pageIndex: 0,
          pageSize: 20
        }
      }
    },
    components: {
      VueBetterScroll,
      Tab,
      TabItem,
      noData,
      myMenu
    },
    created () {
      this.$vux.loading.show({
        text: '加载中...'
      })
      this.param.data.id = this.$route.query.id
      this.getData()
    },
    methods: {
      getData () {
        breakList(this.param).then((res) => {
          if (res.code === 0) {
            this.acceptList = res.data
            this.listCount = this.acceptList.length
            this.listAllCount = res.count
          }
        }).catch(() => {
          console.log('error')
        }).finally(() => {
          this.$vux.loading.hide()
          this.flag = true
        })
      },
      onPullingDown () {
        console.log('xl')
      },
      onPullingUp () {
        this.param.pageIndex++
        breakList(this.param).then((res) => {
          if (res.code === 0) {
            this.acceptList = this.acceptList.concat(res.data)
            this.listCount = this.acceptList.length
            this.listAllCount = res.count
            if (this.listCount < this.listAllCount) {
              this.$refs[`scrollqq`].forceUpdate(true)
            } else {
              this.$refs[`scrollqq`].forceUpdate(false)
            }
          }
        }).catch(() => {
          console.log('error')
        }).finally(() => {
          this.$vux.loading.hide()
          this.flag = true
        })
      },
      onClick () {
        this.param.data.name = this.name
        this.getData()
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';
  .basicMsg {
    position:fixed;
    top:0px;
    width:100%;
    left:0;
    overflow:scroll;
    bottom:100px;
    .vux-tab-selected{
      i{
        font-size: 15px;
        color: #2269ff;
        font-weight: bold;
      }
    }
    dl {
      height: 80px;
      border-bottom: 1px solid #f0f0f2;
      font-size: 12px;
      margin-left: 20px;
      overflow: hidden;
      background: url(../../../../static/images/index/more3.png) no-repeat right 20px center;
      background-size: 6px 10px;
      dt{
        width:221px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: break-word;
        color: #333;
        font-size: 14px;
        margin:20px 0 13px 0;
        font-weight: normal;
      }
      dd{
        color: #999;
        font-size: 14px;
      }
    }
  }
</style>
